<template>
    <!-- 左侧二级菜单栏的组件封装 -->
    <div class="sidebar">
        <el-menu ref="menu" class="sidebar-el-menu" background-color="#ffffff" text-color="#639DE3" @select="handleSelect" unique-opened :default-openeds="defaultOpeneds">
            <template v-for="(item, index) in menuList">
                <el-submenu v-if="!!item.son&&item.son.length>0" :key="index" :index="item.m_id+''">
                    <!-- <template slot="title"> -->
                    <span style="font-size: 16px; padding:0;" class="title" slot="title">{{ item.m_name }}</span>
                    <!-- </template> -->
                    <el-menu-item class="son_menu_item" v-for="(el, ind) in item.son" :key="ind" :index="el.route">
                        <span class="title" slot="title">{{ el.m_name }}<span class="el-icon-arrow-right"></span></span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="index" :index="item.route">
                    <span class="title" slot="title">{{ item.m_name }}<span class="el-icon-arrow-right"></span></span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            defaultOpeneds:[],
            menuList: []
        };
    },
    computed: {
        tabsId() {
            return this.$store.state.tabsId;
        }
    },
    watch: {
        tabsId() {
            this.setMenuIndex(this.menuList);
        }
    },
    methods: {
        getMenuList(id) {
            // if(id==34){
                // this.menuList=[
                //     {m_id: 1, m_name: "账号", route: "Account", image: "null", isType: 0, position: 0},
                //     {m_id: 15, m_name: "菜单管理", route: "MenuManagement", image: "null", isType: 0, position: 0},
                //     {m_id: 21, m_name: "用户组", route: "UserGroups", image: "null", isType: 0, position: 0},
                //     {m_id: 25, m_name: "权限", route: "Authority", image: "null", isType: 0, position: 0},
                // ]
            // }else if(id==864){
            //     this.menuList=[
            //         {m_id: 4, m_name: "报关员信息 ", route: "CustomsDeclaration", image: "null", isType: 0, position: 0},
            //         {m_id: 5, m_name: "公司信息", route: "CompanyInformation", image: "null", isType: 0, position: 0},
            //         {m_id: 6, m_name: "货物信息", route: "GoodsInformation", image: "null", isType: 0, position: 0},
            //     ]
            // }else if(id==148){
            //     this.menuList=[
            //         {m_id: 7, m_name: "包裹信息 ", route: "PackagenIformation", image: "null", isType: 0, position: 0},
            //         {m_id: 8, m_name: "车辆管理", route: "VehicleManagement", image: "null", isType: 0, position: 0},
            //         {m_id: 9, m_name: "客户信息", route: "CustomerInformation", image: "null", isType: 0, position: 0},
            //         {m_id: 10, m_name: "汇率", route: "ExchangeRate", image: "null", isType: 0, position: 0},
            //     ]
            // }
            this.$get("menuson", { p_id: id }).then((res) => {
                if(res.success){
                    this.menuList = res.data;
                    this.setMenuIndex(this.menuList);
                }
            });
        },
        // setMenuIndex() {
        //     let arr = this.menuList.filter((item) => {
        //         return item.m_id == this.tabsId;
        //     });
        //     this.$nextTick(()=>{
        //         if (arr.length > 0) {
        //             this.$refs.menu.activeIndex = arr[0].route; //通过ref强制给Menu元素加默认选择
        //         } else {
        //             this.$refs.menu.activeIndex = ''; //通过ref强制给Menu元素加默认选择
        //         }
        //     })
        // },
        setMenuIndex(arr){
            for(var i=0;i<arr.length;i++){
                if(!!arr[i].son&&arr[i].son.length>0){
                    this.setMenuIndex(arr[i].son)
                }else{
                    if(arr[i].m_id==this.tabsId){
                        console.log(arr[i])
                        this.$nextTick(()=>{
                            this.$refs.menu.activeIndex = arr[i].route
                            this.defaultOpeneds=[arr[i].parent_id+'']
                        })
                        break
                    }else{
                        this.$refs.menu.activeIndex = ''
                        this.defaultOpeneds=[]
                    }
                }
            }
        },
        setTab(arr,route){
            for(var i=0;i<arr.length;i++){
                if(!!arr[i].son&&arr[i].son.length>0){
                    this.setTab(arr[i].son,route)
                }else{
                    if(arr[i].route==route){
                        let  obj=arr[i]
                        this.$store.commit('editTabsList', obj);
                        this.$store.commit('editTabsId', obj.m_id);
                        this.$router.push({ name: obj.route });
                        break
                    }
                }
            }
        },
        handleSelect(route) {
            this.setTab(this.menuList,route)
        }
    }
};
</script>

<style lang="scss" scoped>
/* 左侧菜单栏定位和位置大小设定 */
.sidebar {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 1px 3px 8px red;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu {
    width: 100%;
}
.sidebar > ul {
    height: 100%;
    .el-menu-item{
        display: flex;
    }
    .title{
      padding: 10px 0;
      display: flex;
      white-space: pre-line;
      align-items: center;
      justify-content: space-between;
      color: #000;
    }
    .son_menu_item{
        padding: 0px 20px 0 45px !important;
    }
    .son_title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #000;
        font-size: 14px;
        /deep/ .el-icon-arrow-right{
            font-size: 14px;
        }
    }
}

/* 左侧二级菜单项的样式 */
.el-menu-item {
    font-size: 16px !important;
}
.el-menu-item:hover {
    background-color: #ecf5ff !important;
    .title{
        color: #639de3;
    }
}
.el-menu .el-menu-item.is-active{
    background: url("../../assets/img/left-menu-active.png") no-repeat 0 0 / 100% 100% !important;
    .title{
        color: #fff;
    }
}

/* 左侧二级菜单选中时的样式 */
.el-menu-item.is-active {
    color: white !important;
    background: #3989fa !important;
}
.el-menu-item,
.el-submenu__title {
    padding: 0 10px;
    height: 56px !important;
    line-height: 20px !important;
}
/deep/ .el-menu--inline{
    height: auto !important;
}
/deep/ .el-submenu__title:hover {
    background-color: #ecf5ff !important;
    .title{
        color: #639de3;
    }
}
/deep/ .el-submenu__icon-arrow {
    font-size: 18px;
    right: 30px;
    color: #000;
}
</style>